<template>
  <div class="import-modal">
    <BaseModal
      v-model="show"
      width="400"
      :title="'导入' + typeTitle.title"
      :mask-closable="!loading"
      :closable="!loading"
    >
      <Row type="flex" class="mb-20">
        <img :src="insert_img" height="40" />
        <div class="ml-20">
          <ul>
            <li>重复的数据只有一条会被导入</li>
            <li>若用户名相同，此条数据将被丢弃。</li>
          </ul>
        </div>
      </Row>
      <Row type="flex" class="steps-box">
        <Steps direction="vertical">
          <Step
            status="process"
            title="下载Excel导入模板"
            :content="`请务必使用该模板填写${typeTitle.title}信息`"
          ></Step>
          <Step
            status="process"
            title="上传已经填入信息的Excel"
            :content="`若${typeTitle.flag}相同，此条数据将被丢弃!`"
          ></Step>
          <Step
            id="result"
            ref="result"
            status="process"
            title="系统自动导入"
            content="并显示导入结果"
          ></Step>
        </Steps>
        <div class="insert-btn">
          <Button :disabled="loading" @click.prevent="downloadtpl">
            <Icon type="ios-cloud-download" size="16" color="#777" />
            <span class="ml-5">下载</span>
          </Button>
          <!--data上传时附带的额外参数 getType使用inject的参数值-->
          <Upload
            :before-upload="handleUpload"
            :data="{ objectType: getType }"
            :action="actionUrl"
            :show-upload-list="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :on-success="success"
            :on-error="error"
          >
            <Button :disabled="loading" type="success">
              <Icon type="ios-cloud-download" size="16" color="#fff" />
              <span class="ml-5">上传</span>
            </Button>
          </Upload>
          <!--loading加载效果图 loading控制图标360度旋转,引入global.styl公共样式 -->
          <div class="insert-loading">
            <div v-show="loading">
              <label>导入中...</label>
              <Icon
                custom="iconfont icon-jiazai loading"
                size="28"
                color="#B4B7BE"
              />
            </div>
          </div>
          <a
            v-show="showErrorDownload"
            :href="
              `/wec-smmp-bd/data/export-error-file?batchId=${result.batchId}`
            "
            target="_self"
            >下载出错记录</a
          >
        </div>
      </Row>
      <div slot="footer">
        <Button :disabled="loading" @click="close">关闭</Button>
      </div>
    </BaseModal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Inject } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
import { ExportResultData } from "@/store/interface.ts";

import {
  typeMap,
  UPLOAD_IMPORT_URL,
  UPLOAD_TEMPLATE_URL
} from "@utils/type.ts";
import BaseModal from "@components/iv-modal/BaseModal.vue";
@Component({
  components: { BaseModal }
})
export default class ImportModal extends Tools {
  @Prop()
  private value!: boolean;
  private loading: boolean = false; //控制button按钮是否可点击
  private file: object = {};
  private datas: object = {};
  private result: ExportResultData = {
    failNum: 0,
    batchId: 0,
    successNum: 0
  }; //错误日志相关内容

  /**
   * 父组件进行注入依赖注入，则子组件中获取使用
   */
  @Inject()
  private getType!: string;

  //下载错误日志
  private get showErrorDownload() {
    return !this.loading && this.result.failNum && this.result.batchId;
  }

  private get insert_img() {
    return require("@assets/img/icon_insert.png");
  }
  /**
   * 控制弹框层的展示
   */
  private get show() {
    return this.value;
  }
  private set show(val) {
    let dom: any = document.querySelector("#result .ivu-steps-content"); //ts的类型
    dom.innerHTML = "并显示导入结果"; //弹框层发生变化时，内容恢复初始化
    this.$emit("input", val);
  }
  /**
   * 标题
   */
  private get typeTitle() {
    return typeMap[this.getType];
  }

  private get actionUrl() {
    return UPLOAD_IMPORT_URL;
  }

  private handleUpload(file) {
    console.log(file);
    let name = file.name;
    let isExcel = /\.xlsx$/.test(name);
    this.loading = true;
    if (!isExcel) {
      this.$Message.error("请导入Excel文件！");
      this.loading = false;
    }
    return isExcel;
  }

  private success(response) {
    this.loading = false;
    let { code, datas, message } = response; // 为啥重新定义datas属性
    let dom: any = document.querySelector("#result .ivu-steps-content"); //ts的类型
    if (code === "0") {
      this.result = datas;
      console.log(this.result, "导入结果");
      dom.innerHTML = `<div><p><font color="#19BE6B">${
        datas.successNum
      }</font> 条新信息导入成功</p><p><font color="#ED3F14">${
        datas.failNum
      }</font> 条新信息导入失败</p></div>`;
      this.$Message.success("导入完成！");
      this.$emit("refresh"); //父组件@refresh="getList"刷新列表
    } else {
      this.$Message.error("导入失败！");
    }
  }

  private error(error) {
    this.loading = false;
    this.$Message.error("导入失败！");
  }
  /**
   * 下载模板
   */
  downloadtpl() {
    window.open(UPLOAD_TEMPLATE_URL + `objectType=${this.getType}`, "_self");
  }

  private close() {
    this.show = false;
  }
}
</script>
<style lang="stylus" scoped>
.steps-box>>>.ivu-steps.ivu-steps-vertical {
  width: auto
  flex-grow: 1
}
.steps>>>.ivu-steps-content {
  color: #999
}
.steps-box {
  justify-content: space-between
  display: flex
}
.insert-btn {
  display: flex
  justify-content: space-around // 均分上下空余距离
  flex-flow: column nowrap
}
.insert-loading {
  height: 40px
  label {
    margin-right: 10px
  }
}
</style>
